<template>
	<view class="container">
		<view class="page-body">
		
			
			<view class='wrapper'>
				<uni-section title="" type="line">
					<uni-forms-item label="请选择分类" >
						
						<uni-data-select
						        v-model="value"
						        :localdata="range"
						        @change="change"
						      ></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="公开状态" required>
						<uni-data-checkbox v-model="publicStatus" :localdata="publicStatusList" />
					</uni-forms-item>
				</uni-section>
				
				<view class='toolbar' @tap="format" style="height: 40px;overflow-y: auto;">
					<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold">
					</view>
					<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic">
					</view>
					<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian"
						data-name="underline"></view>
					<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian"
						data-name="strike"></view>
					<!-- #ifndef MP-BAIDU -->
					<view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi"
						data-name="align" data-value="left"></view>
					<!-- #endif -->
					<view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi"
						data-name="align" data-value="center"></view>
					<view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi"
						data-name="align" data-value="right"></view>
					<view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi"
						data-name="align" data-value="justify"></view>
					<!-- <view class="iconfont icon-fengexian" @tap="insertDivider"></view> -->
					<view class="iconfont icon-charutupian" @tap="insertImage"></view>
					<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie"
											data-name="list" data-value="ordered"></view>
					<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie"
						data-name="list" data-value="bullet"></view>

					<!-- <view class="iconfont icon-shanchu" @tap="clear"></view> -->

					<view :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl"
						data-name="direction" data-value="rtl"></view>
				</view>

				<view class="editor-wrapper">
					<editor id="editor"  class="ql-container" placeholder="开始输入..." show-img-size show-img-toolbar
						show-img-resize @statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady">
					</editor>
					
				</view>
			</view>
			
				<view >
					
					<button type="primary" @click="submit()">保存</button>
				</view>
					
		<!-- <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">底部弹出 Popup 自定义圆角</uni-popup> -->
		<uni-popup ref="popup" type="center"  background-color="#fff" :animation="true">数据加载中...</uni-popup>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js';//需要引入store
	import constant from '@/store/constant.js'
	const baseUrl=constant.baseUrl;
	const baseImageUrl=constant.baseImageUrl;
	export default {
			computed:{
				
				
				shareInfo(){
					return store.state.share.shareInfo
				},
				
			},
			data() {
				return {
					imageUrl:baseImageUrl,
					readOnly: false,
					formats: {},
					shareId:"",
					value: 0,
					range: [
					  { value: 0, text: "个人" },
					  { value: 1, text: "分享" },
					  { value: 2, text: "特殊" },
					],
					publicStatusList:[{
					text: '公开',
					value: 1
				}, {
					text: '保密',
					value: 0
				}],
					publicStatus:1
				}
			},
			onLoad(option) {
				console.log(555);
				console.log(JSON.stringify(option))
				if(option.id!=undefined){
					this.shareId=option.id;
					store.dispatch('loadShareInfo',this.shareId)
				}
			
				// #ifndef MP-BAIDU 
				uni.loadFontFace({
					family: 'Pacifico',
					source: 'url("https://sungd.github.io/Pacifico.ttf")'
				})
				// #endif
			
				
			},
			methods: {
				submit(){
					var self=this;
					
					
					this.editorCtx.getContents({
						success: function(text) {
							
							store.dispatch('addShareData',{"id":self.shareId,"context":text.html}).then(()=>{
								uni.showToast({
									title:"发布成功",
									icon:'none'
								})
								 setTimeout(() => {
									uni.redirectTo({
										url:"/pages/share/shareList"
									})
								}, 1000);
								
							});
							
							console.log("文本详情：", text.html)
							
							
							
						},
						fail: function(A) {}
					})
				},
				readOnlyChange() {
					this.readOnly = !this.readOnly
					console.log("readOnlyChange");
				},
				onEditorReady() {
					console.log(111);
					var self=this;
					// self.$refs.popup.open()
					uni.showLoading({
						title:"加载中..."
					})
					console.log(222);
					console.log("onEditorReady")
					var self=this;
					console.log(JSON.stringify(store.state.share.shareItem))
					// #ifdef MP-BAIDU
					this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
					
					// #endif
	
					// #ifdef APP-PLUS || MP-WEIXIN || H5
					uni.createSelectorQuery().select('#editor').context((res) => {
						this.editorCtx = res.context
						
					}).exec()
					// #endif
					setTimeout(() => {
						this.editorCtx.setContents({
							html:store.state.share.shareItem.context
						})
						// self.$refs.popup.close();
						uni.hideLoading()
						console.log(444);
					}, 1000);
					console.log(333);
					
					
					console.log("onEditorReady");
				},
				undo() {
					this.editorCtx.undo()
				},
				redo() {
					this.editorCtx.redo()
				},
				format(e) {
					let {
						name,
						value
					} = e.target.dataset
					if (!name) return
					// console.log('format', name, value)
					this.editorCtx.format(name, value)
				},
				onStatusChange(e) {
					const formats = e.detail
					this.formats = formats
				},
				insertDivider() {
					this.editorCtx.insertDivider({
						success: function() {
							console.log('insert divider success')
						}
					})
				},
				clear() {
					uni.showModal({
						title: '清空编辑器',
						content: '确定清空编辑器全部内容？',
						success: res => {
							if (res.confirm) {
								this.editorCtx.clear({
									success: function(res) {
										console.log("clear success")
									}
								})
							}
						}
					})
				},
				removeFormat() {
					this.editorCtx.removeFormat()
				},
				insertDate() {
					const date = new Date()
					const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
					this.editorCtx.insertText({
						text: formatDate
					})
				},
				insertImage() {
					let self=this;
					uni.chooseImage({
						count: 1,
						success: (res) => {
							uni.uploadFile({
								url: baseUrl+'/api/upload/uploadFile', 
								filePath: res.tempFilePaths[0],
								name: 'file',
								// formData: {
								// 	'user': 'test'
								// },
								success: (result) => {
									
									let data =JSON.parse(result.data);
									console.log(data)
									if(data.code==0){
										
										
										this.editorCtx.insertImage({
											src:self.$data.imageUrl+ data.result.url,
											width:"300px",
											alt: '图像',
											success: function() {
												console.log('insert image success')
											}
										})
									}
									
								}
							});
							console.log(res)
							
						}
					})
				}
			}
		}
</script>

<style>
	@import "./editor-icon.css";
	.container {
			overflow: hidden;
		}
	
		.custom-cover {
			flex: 1;
			flex-direction: row;
			position: relative;
		}
	
		.cover-content {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 40px;
			background-color: rgba($color: #000000, $alpha: 0.4);
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-left: 15px;
			font-size: 14px;
			color: #fff;
		}
	
		.card-actions {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			height: 45px;
			border-top: 1px #eee solid;
		}
	
		.card-actions-item {
			display: flex;
			flex-direction: row;
			align-items: center;
		}
	
		.card-actions-item-text {
			font-size: 12px;
			color: #666;
			margin-left: 5px;
		}
	
		.cover-image {
			flex: 1;
			height: 150px;
		}
	
		.no-border {
			border-width: 0;
		}
		.page-body {
			height: calc(100vh - var(--window-top) - var(--status-bar-height));
		}
	
	
		.wrapper {
			/* height: 100%; */
		}
	
		.editor-wrapper {
			/* height: calc(100vh - var(--window-top) - var(--status-bar-height) - 140px); */
			height:500px;
			background: #fff;
		}
	
		.iconfont {
			display: inline-block;
			padding: 8px 8px;
			width: 24px;
			height: 24px;
			cursor: pointer;
			font-size: 20px;
		}
	
		.toolbar {
			box-sizing: border-box;
			border-bottom: 0;
			font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
		}
	
		.ql-container {
			box-sizing: border-box;
			padding: 12px 15px;
			width: 100%;
			min-height: 30vh;
			height: 100vh;
			margin-top: 20px;
			font-size: 16px;
			line-height: 1.5;
		}
	
		.ql-active {
			color: #06c;
		}
</style>